<template>
  <div class="search_box">
    <div class="input_box">
      <input class="ph_10" v-model="searchVal" type="text" @keydown.enter="searchBooks(false)">
      <i class="el-icon-search" @click="searchBooks(false)"></i>

      <div class="search_mn" @click="searchBooks(true)">蒙文书籍</div>
    </div>
    
    <div class="change_list">
      <div class="list_item" :class="{ on: activeListIndex == '1' }" @click="clickItem('1')">全部</div>
      <div class="list_item" :class="{ on: activeListIndex == '2' }" @click="clickItem('2')">书号</div>
      <div class="list_item" :class="{ on: activeListIndex == '3' }" @click="clickItem('3')">作者</div>
      <div class="list_item" :class="{ on: activeListIndex == '4' }" @click="clickItem('4')">出版社</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      searchVal: '',
      activeListIndex: 1,
    }
  },
  computed: {
    getStateSearchVal() {
      this.searchVal = this.$store.state.searchVal
    },

    getStateActiveIndex() {
      this.activeListIndex = this.$store.state.activeIndex
    },
  },
  created() {
    this.getStateSearchVal
    this.getStateActiveIndex
  },
  methods: {
    searchBooks(val) {  
      this.$store.commit('changeStyle', val)
      this.$store.commit('changeSearchVal', this.searchVal)

      let query = {}
      query.isMon = val

      // 模糊查询
      if (this.activeListIndex === '1' ) {
        query.search = this.searchVal
        this.$route.query.search = this.searchVal
      } 
        
      // 分类查询
      if (this.activeListIndex === '2' ) {
        query.isbn = this.searchVal
        this.$route.query.isbn = this.searchVal
      } else if (this.activeListIndex === '3') {
        query.authors = this.searchVal
        this.$route.query.authors = this.searchVal
      } else if (this.activeListIndex === '4') {
        query.publisher = this.searchVal
        this.$route.query.publisher = this.searchVal
      }
      this.$route.query.isMon = val

      if (this.$route.path !== '/book-list') {
        this.$router.push({
          path: '/book-list',
          query
        })
      } else {
        query.isMon = val
        this.$emit('getBookList', query)
      }
    },

    clickItem(index) {
      this.activeListIndex = index
      this.$store.commit('changeActiveIndex', this.activeListIndex)
    }
  }
  
}
</script>

<style lang="less" scoped>
  .on { 
    color: #000 !important;
    font-size: 24px;
    border-bottom: 4px solid #74a5ff;
  }
  .search_box {
    width: 100%;
    text-align: center;
    position: relative;
    // border:  1px solid #000;

    .input_box {
      width: 800px ;
      height: 40px;
      // border: 1px solid #000;

      input {
        width: 80%;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
      }

      i {
        position: absolute;
        right: 22%;
        line-height: 40px;
        color: #74a5ff;
        font-weight: 800 !important;
      }

      .search_mn {
        width: 18%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #74a5ff;
        color: #fff;
        border-radius: 5px;
        position: absolute;
        top: 0%;
        right: 0;
      }
      &:hover { cursor: pointer; }
    }
    
    

    .change_list {
      width: 100%;
      height: 40px;
      // border: 1px solid #74a5ff;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;

      .list_item {
        color: #ccc;
        font-weight: 600;
        padding: 5px 2px;
      }
      &:hover {
        cursor: pointer;
      }
    }

    .el-icon-search:hover {
      cursor: pointer;
    }
  }

  @media screen and (min-width: 1600px) {
    .list_item { font-size: 20px; }
  }  

  @media screen and (min-width: 1200px) and (max-width: 1599px) {
    .list_item { font-size: 18px; }
  }

  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .list_item { font-size: 16px; }
    .input_box { width: 700px !important; }
  }

  @media screen and (min-width: 768px) and (max-width: 992px)  {
    .list_item { font-size: 14px; }
    .input_box { width: 600px !important; }
  }
</style>